<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <style>
        #btn0 {
            font-size: 2em;

        }
        .btn1 {
            border: 1px dotted red;
        }
    </style>
</head>
<body>
    <form id="form0">
        username:<input type="text" name="username" />
        password:<input type="password" name="password" />
        <input id="btn0" class="btn1" type="button" onclick="loginHandler()" value="登录" />
    </form>
    <script>
        function loginHandler() {
            // ajax:异步提交，restful风格 get/post/put/delete/..; 用json作为数据格式
            // debugger
            // console.info($("#form0").serialize())
            // let param = $("#form0").serialize()

            let param = {username: $("[name='username']").val(), password: $("[name='password']").val()};

            // http://localhost:8080/login?username=aaa&password=bb
            $.ajax("login", {
                data: param,
                method: "GET",
                resultType: "json",
                success: function (resp) {
                    console.info(resp)
                    alert(resp.msg)
                    if (resp.data) {
                        // 页面跳转
                        window.location.href="welcome.html"
                        // 浏览器存储
                        localStorage.user= resp.data.username
                    }
                }
            })
        }
    </script>
</body>
</html>